<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <title><span th:include="temp :: projectName" th:remove="tag"></span> <span th:include="temp :: version" th:remove="tag"></span></title>
	<div th:include="temp :: cssAndJs" th:remove="tag"></div>
    <link rel="stylesheet" th:href="@{/lib/layui/css/layui.css}" media="all"/>
    <style>
        .layui-layout-admin .layui-body {
            top:62px;
            bottom:0;
            overflow-y:hidden;
        }
        .layui-nav-tree .layui-nav-item > a {
            background-color: #2B2E37!important;
        }
        #main_iframe {
            width:100%;
            height:100%;
            border:0;
        }
    </style>
</head>
<body>
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header" style="background-color: #f8f8f8;border-bottom: 1px solid #393D49;">
            <div style="line-height:60px;color:#333;margin-left:50px;font-size:20px;">
                <img src="/images/logo.png" style="height:51px;margin:5px 10px 5px 0;"/>
               <span th:include="temp :: projectName" th:remove="tag"></span><span th:include="temp :: version" th:remove="tag"></span>
            </div>
            <div style="position: absolute;right:50px;top:0; line-height:60px;">
                <span style="margin-right:20px;" th:text="${'欢迎您：'+shiroUser.username}"></span>
                <button class="layui-btn layui-btn-primary" id="logoutBtn">退出</button>
            </div>
        </div>
        <div class="layui-side layui-bg-black" style="width:inherit;">
            <ul class="layui-nav layui-nav-tree">
                <li shiro:hasAnyPermissions="/sys_user, /sys_log" class="layui-nav-item layui-nav-itemed">
                    <a href="javascript:;">系统管理</a>
                    <dl class="layui-nav-child">
                        <dd shiro:hasPermission="/sys_user"><a href="javascript:;" data-url="/sys_user">用户管理</a></dd>
                        <dd shiro:hasPermission="/sys_log"><a href="javascript:;" data-url="/sys_log">日志查看</a></dd>
                    </dl>
                </li>
            </ul>
        </div>
        <div class="layui-tab layui-tab-brief">
            <div class="layui-body">
                <iframe id="main_iframe" frameborder="no" src="/default"></iframe>
            </div>
        </div>
    </div>
    <div id="alarm_div" style="display: none;">
        <div style='text-align: center;'>
            <div style="margin:10px 0;">有新的事件需要处理。</div>
            <button class='layui-btn layui-btn-normal btn-alram-detail'>查看</button>
            <button class='layui-btn layui-btn-danger btn-stopSound'>停止报警</button>
        </div>
    </div>
    <script th:src="@{/lib/layui/layui.js}"></script>
    <script type="text/javascript" th:inline="javascript">
        /*<![CDATA[*/
       	var alarmlist = [];
        var lastupdateTime = new Date().getTime();
        var url = '';
        layui.config({
            base:'/lib/layui/lay/modules'
        }).use(['element','layer'], function(){
            var element = layui.element(),
                $ = layui.jquery,
                layer = layui.layer;
            var list = $('dd').find("a");

            $("dd>a").click(function(){
                url = $(this).data('url');
                if(!url) {
                    console.error("url must not null.")
                    return;
                }
                if($('#main_iframe').attr('src') == url) return;
                console.log(url);
                document.getElementById("main_iframe").src = url;
            });


            function alarmEventListener() {
                $.ajax({
                    type: 'POST',
                    url: /*[[@{/alarm_event/list}]]*/'',
                    success: function (result) {
                        if (result.code == 0) {
                            var list = result.alarmEventList;
                            var lastestList = result.lastestList;
                            lastupdateTime = result.lastTime;
                            alarmlist = lastestList;
                            if(list && list.length>0) {
                                showAlarm();
                            } else {
                                hideAlarm();
                            }
                        }
                        setTimeout(alarmEventListener, 2000);
                    }
                });
            }
            alarmEventListener();

            //控制菜单单个展开
//            var $ul = $('ul.layui-nav');
//            $ul.find('li.layui-nav-item').each(function(){
//                $(this).on('click',function(){
//                    $(this).siblings().removeClass('layui-nav-itemed');
//                });
//            });

            var index = null;
            var isShow = false;
            function showAlarm() {
                if(isShow) return;
                isShow = true;
                index = layer.open({
                    type: 1,
                    title: '提醒',
                    closeBtn:0,
                    shade: false,
                    area: ['260px', '150px'],
                    offset: 'rb',
                    anim: 2,
                    content: $("#alarm_div")
                });
            }
            function hideAlarm() {
                isShow = false;
                layer.close(index);
            }

            $(".btn-alram-detail").click(function(){
                var url = '/alarm_event';
                if($('#main_iframe').attr('src') == url) return;
                document.getElementById("main_iframe").src = url;
            });
            $(".btn-stopSound").click(function(){
                var url = /*[[@{/alarm_event/stop_sound}]]*/'';
                $.ajax({type: 'POST',url: url});
            });

            $("#logoutBtn").click(function(){
                layer.confirm('是否确定退出?', {icon: 3, title:'提示'}, function(index){
                    window.location = "/logout";
                });
            });

        });
        function refreshIframe() {
            document.getElementById("main_iframe").src = url;
        }
        /*]]>*/
    </script>
</body>
</html>